<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-survey-html-form.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css"></script>
  </head>
  <body></body>
  <script type="text/javascript">

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var form_trial = {
      type: jsPsychSurveyHtmlForm,
      preamble: '<p> How are you feeling <b>right now?</b> </p>',
      html: '<p>I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
    };

    var autofocus_trial = {
      type: jsPsychSurveyHtmlForm,
      preamble: '<p> What is your favorite bird?</p>',
      html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="fav-bird" size="10" /></p>',
      autofocus: 'test-resp-box'
    };

    jsPsych.run([form_trial,autofocus_trial]);

  </script>
</html>